import React, { useState, useEffect, useRef } from "react";

// /api/list

// 函数组件 ｜ 无状态组件 ｜ UI组件
// React@16.8 出现了 hooks
// 能够使我们的函数组件像类组件一样进行逻辑编程

const App = () => {
  // 声明数据, 和类组件 state  setState
  const [count, setCount] = useState(100);
  const [arr, setArr] = useState([]);
  const [value, setValue] = useState("");
  // 获取节点
  const input = useRef()
  // 声明函数
  const handleAdd = () => {
    setArr(arr.concat(value));
  };
  // 副作用 hooks
  // 1. 页面首次渲染完毕执行
  useEffect(() => {
    console.log("页面首次渲染完毕");
    // 1. 发送请求
    setTimeout(() => {
      setArr(["a", "b", "c", "d"]);
    }, 2000);
    // 2. dom 操作
    console.log(input.current)
  }, []);

  // 2.  第二个参数不存在时， 任何数据发生改变， 副作用函数都会执行
  //     第二个参数存在的时候， 并且是一个空数组的时候，  副作用函数都不会执行
  //     第二个参数存在的时候，并且有依赖参数。 当依赖的值发生改变的时候，副作用执行
  useEffect(() => {
    console.log(111111111111)
    return () => {
      // 3. 当组件销毁的时候， 该函数执行
    }

  }, [count])



  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount((count) => count + 10)}>10</button>
      <hr />
      {/* value, onChange 受控组件 */}
      <input
        ref={input}
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <div>{value}</div>
      <button onClick={() => handleAdd()}>添加</button>
      <ul>
        {arr.map((v, i) => {
          return <li key={i}>{v}</li>;
        })}
      </ul>
    </div>
  );
};

export default App;
